<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>响应式布局——固定 & 流体</title>
	<link rel="stylesheet" type="text/css" href="http://coding.imweb.io/demo/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style-fixed.css">
</head>

<body>
	<div class="page page--aside-right">
		<header class="header">
			<div class="center-inner">
				<h1>header区域</h1>
				<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
			</div>
		</header>

		<div class="container">
			<div class="center-inner">
				<main class="main">
					<div class="content">
						<h2>内容区域</h2>
						<div class="list">
							<a href="#" class="item"><img class="item-img" src="http://coding.imweb.io/img/img-style.png" alt=""></a>
							<a href="#" class="item"><img class="item-img" src="http://coding.imweb.io/img/img-style.png" alt=""></a>
							<a href="#" class="item"><img class="item-img" src="http://coding.imweb.io/img/img-style.png" alt=""></a>
							<a href="#" class="item"><img class="item-img" src="http://coding.imweb.io/img/img-style.png" alt=""></a>
						</div>

					</div>
				</main>
				<!--main-->

				<aside class="aside aside--right">
					<section class="aside-block">
						<h2>右边栏区域 1</h2>
						<ul>
							<li>君子博学而日参省乎己，则知明而行无过矣。</li>
							<li>神莫大于化道，福莫长于无祸</li>
							<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
						</ul>
					</section>
					<section class="aside-block">
						<h2>右边栏区域 2</h2>
						<ul>
							<li>君子博学而日参省乎己，则知明而行无过矣。</li>
							<li>神莫大于化道，福莫长于无祸</li>
							<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
						</ul>
					</section>
				</aside>
				<!--aside_right-->
			</div>
		</div>
		<!--container-->

		<footer class="footer">
			<div class="center-inner">
				<h2>footer区域</h2>
				<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
			</div>
		</footer>
	</div>
</body>

</html>